<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    

    <div id="app">
        <!-- 定义路由路径 -->
        <router-link to="/self">个人信息</router-link>
        <router-link to="/safe">账号安全</router-link>

        <!-- 路由占位 -->
        <router-view></router-view>
    </div>

    <!-- 这是外层路由的模板 -->
    <template id="self">
        <div>
            <h4>这是个人信息</h4>
            <router-link to="/self/base">基本信息</router-link>
            <router-link to="/self/people">头像照片</router-link>
            <router-link to="/self/more">更多个人信息</router-link>
            <router-view></router-view>
        </div>
    </template>

    <template id="safe">
        <div>
            <h4>这是账号安全</h4>
        </div>
    </template>

    <!-- 这是个人信息内层模板 -->
    <template id="base">
        <div>
            <img src="../lib/image/base.png" alt="">
        </div>
    </template>

    <template id="people">
        <div>
            <img src="../lib/image/people.png" alt="">
        </div>
    </template>

    <template id="more">
        <div>
            <img src="../lib/image/more.png" alt="">
        </div>
    </template>

    <script src="../lib/Vue/vue.js"></script>
    <script src="../lib/Vue/vue-router.js"></script>
    <script>

        var InfoSelf = {
            template: '#self'
        }
        var InfoSafe = {
            template: '#safe'
        }
        var SelfBase = {
            template: '#base'
        }
        var SelfPeople = {
            template: '#people'
        }
        var SelfMore = {
            template: '#more'
        }

        // 配置路由表
        var routes = [
            {
                path: '/',
                redirect: 'self/base'
            },
            {
                path: '/self',
                component: InfoSelf,
                children: [
                    {
                        path: '/self/base',
                        name: 'base23',
                        component: SelfBase
                    },
                    {
                        path: '/self/people',
                        component: SelfPeople
                    },
                    {
                        path: '/self/more',
                        component: SelfMore
                    }
                ]
            },
            {
                path: '/safe',
                component: InfoSafe
            }
        ]

        // 实例化一个路由
        var router = new VueRouter({
            routes,
        })

        var vm = new Vue({
            el: '#app',
            router,
        })
    </script>
</body>
</html>